<!DOCTYPE html>
<html>

<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>审批</title>
	<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
	<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

	<link rel="shortcut icon" href="favicon.ico">
	<link href="css/bootstrap.min.css-v=3.3.5.css"
		  tppabs="http://www.zi-han.net/theme/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
	<link href="css/font-awesome.min.css-v=4.4.0.css"
		  tppabs="http://www.zi-han.net/theme/hplus/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="css/plugins/footable/footable.core.css"
		  tppabs="http://www.zi-han.net/theme/hplus/css/plugins/footable/footable.core.css" rel="stylesheet">

	<link href="css/plugins/dataTables/dataTables.bootstrap.css"
		  tppabs="http://www.zi-han.net/theme/hplus/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

	<link href="css/animate.min.css" tppabs="http://www.zi-han.net/theme/hplus/css/animate.min.css"
		  rel="stylesheet">
	<link href="css/style.min.css-v=4.0.0.css" tppabs="http://www.zi-han.net/theme/hplus/css/style.min.css?v=4.0.0"
		  rel="stylesheet">
	<link href="./layui/css/layui.css">
	<base target="_blank">
	<style>
		#zhuti {
			height: 100%;

		}

		#zhuti::before {
			background: url('img/lg.jpg') no-repeat fixed center;
			background-size: 300px;
			content: "";
			opacity: 0.2;
			/*透明度设置*/
			width: 80%;
			height: 80%;
			position: absolute;
		}
	</style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>我的审核状态表</h5>
					<!--                    <button onclick="correctExport()" class="btn-info" style="float: right">导出Excel</button>-->
					<div class="ibox-content">
						<table id="zhuti" class="table table-striped table-bordered table-hover dataTables-example">
							<thead>
							<tr>
								<th>活动名称</th>
								<th>活动方</th>
								<th>申请人</th>
								<th>借用原因</th>
								<th>开始时间</th>
								<th>结束时间</th>
								<th>提交申请时间</th>
								<th>审核状态</th>
								<th>借用状态</th>
								<th>查看详情</th>
								<!--                                /延时-->
							</tr>
							</thead>
							<tbody id="tbody">
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.min.js-v=2.1.4" tppabs="http://www.zi-han.net/theme/hplus/js/jquery.min.js?v=2.1.4"></script>
	<script src="js/bootstrap.min.js-v=3.3.5"
			tppabs="http://www.zi-han.net/theme/hplus/js/bootstrap.min.js?v=3.3.5"></script>

	<script src="js/plugins/dataTables/jquery.dataTables.js"
			tppabs="http://www.zi-han.net/theme/hplus/js/plugins/dataTables/jquery.dataTables.js"></script>

	<script src="js/plugins/dataTables/dataTables.bootstrap.js"
			tppabs="http://www.zi-han.net/theme/hplus/js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="layui/layer/layer.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/content.min.js-v=1.0.0"
			tppabs="http://www.zi-han.net/theme/hplus/js/content.min.js?v=1.0.0"></script>
	<script src="./layui/layui.js"></script>
	<script src="./layui/excel.js"></script>
	<script>
        let listData = null;

        // 撤销功能
        function cx(ev) {
            console.log(ev.id, ev.name);
            if (ev.name == '已撤销') {
                layer.open({
                    title: '提醒'
                    , closeBtn: 0
                    , content: '本条数据已撤销'
                    , time: 3000
                });
            } else {
                layer.open({
                    title: '提示'
                    , content: '您真的要撤销吗？'
                    , closeBtn: 0
                    , btn: ['确认', '取消']
                    , yes: function (index, layero) {
                        $.ajax({
                            type: "POST",
                            url: "/user/cancelState",
                            data: {
                                borrowId: parseInt(ev.id),
                            },
                            success: function (msg) {
                                console.log(msg)
                                // var index = layer.open();
                                layer.close(layer.index);
                                if (msg == true) {
                                    msg = "提交成功"
                                }
                                layer.alert(msg)
                            }
                        })
                    }
                    , btn2: function gb(index, layero) {

                    }
                });
            }
        };

        // 获取展示列表放入tbody
        $(document).ready(function () {
            // 请求数据
            $.ajax({
                type: "GET",
                url: "/user/actOne",
                success: function (msg) {
                    let str = "";
                    let list = msg;
                    console.log(msg);
                    listData = msg;
                    let tbody = document.querySelector("#tbody");
                    let a = "";
                    let b = "";
                    // target
                    if (list.length != 0) {
                        for (let i = 0; i < list.length; i++) {
                            // let st=list[i].state;
                            let href = list[i].things + "&reason=" + list[i].reason + "&applicant=" + list[i].applicant + "&tel=" + list[i].tel + "&organizer=" + list[i].organizer + "&startTime=" + list[i].startTime + "&endTime=" + list[i].endTime + "&fid=" + list[i].id;
                            let button = "<a style='z-index: 999' target=\"_self\" href= \"historyDetail1.html?things=" + href + "\"><button type=\"button\" style=\"margin-top: 6px;z-index: 999;\" class=\"btn btn-primary btn-xs\">查看详情</button></a>"
                            // let button2="<button id="+list[i].id+" name="+list[i].state+" onclick='cx(this)' style=\"margin-top: 6px;\" class=\"btn btn-warning btn-xs\">撤销</button>"
                            if (list[i].aprStatus == "审批通过") {
                                a = "<a><i class=\"fa fa-check text-navy\"></i> 通过</a>";
                            } else if (list[i].aprStatus == "未通过") {
                                a = "<a><i class=\"fa fa-close\" style=\"color: #ff0000;\"></i> 未通过</a>";
                            } else if (list[i].aprStatus == "待审批") {
                                a = "<a><i class=\"fa fa-hourglass-2\" style=\"color: orange;\"></i> 待审批</a>";
                            } else if (list[i].aprStatus == "未归还") {
                                a = "<a><i class=\"fa fa-mail-reply\" style=\"color: blue;\"></i> 未归还</a>";
                            } else if (list[i].aprStatus == "已归还") {
                                a = "<a><i class=\"fa fa-trash-o\" style=\"color: dimgrey;\"></i> 已归还</a>";
                            }

                            if (list[i].lendStatus == "未借出") {
                                b = "<a><i class=\"fa fa-close\" style=\"color: #ff0000;\"></i>未借出</a>";
                            } else if (list[i].lendStatus == "已借出") {
                                b = "<a><i class=\"fa fa-mail-reply\" style=\"color: blue;\"></i>已借出</a>";
                            } else if (list[i].lendStatus == "已归还") {
                                b = "<a><i class=\"fa fa-trash-o\" style=\"color: dimgrey;\"></i>已归还</a>";
                            } else if (list[i].lendStatus == "部分归还") {
                                b = "<a><i class=\"fa fa-trash-o\" style=\"color: dimgrey;\"></i>部分归还</a>";
                            }else if(list[i].lendStatus=="已取消"){
								b="<a><i class=\"fa fa-close\" style=\"color: dimgrey;\"></i>已取消</a>";
								button2="";
							} else {
                                b = ""
                            }

                            str += "<tr><td>" + list[i].actName + "</td><td>" + list[i].organizer + "</td><td>" + list[i].applicant + "</td><td>" + list[i].reason + "</td><td>" + list[i].startTime +
                                "</td><td>" + list[i].endTime + "</td><td>" + list[i].applyTime + "</td><td>" + a + "</td><td>" + b + "</td><td style='z-index: 999'>" + button + "</td></tr>";
                            //
                        }
                    }
                    tbody.innerHTML = str;
                    f();
                }
            });
        });

        function f() {
            // 数据表格排序方式
            $(".dataTables-example").dataTable({
                "order": [
                    [6, "desc"]
                ]
            });
            var oTable = $("#editable").dataTable();
            oTable.$("td").edita1ble("http://www.zi-han.net/theme/example_ajax.php", {
                "callback": function (sValue, y) {
                    var aPos = oTable.fnGetPosition(this);
                    oTable.fnUpdate(sValue, aPos[0], aPos[1])
                },
                "submitdata": function (value, settings) {
                    return {
                        "row_id": this.parentNode.getAttribute("id"),
                        "column": oTable.fnGetPosition(this)[2]
                    }
                },
                "width": "90%",
                "height": "100%"
            })
        }

        // 初始化表格
        function fnClickAddRow() {
            $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
        };

        // 导表模块
        // 获取表格
        function getExportData() {
            var data = []
            var sj = {}
            var template = {
                col1: '借用物品',
                col2: "借用原因",
                col3: '申请人',
                col4: '借用开始时间',
                col5: '借用结束时间',
                col6: '提交申请时间',
                col7: '审核状态'
            }
            console.log(listData)
            data.push(template)
            for (var i = 0; i < listData.length; i++) {
                sj = {
                    col1: listData[i].things,
                    col2: listData[i].mes,
                    col3: listData[i].applicant,
                    col4: listData[i].startTime,
                    col5: listData[i].endTime,
                    col6: listData[i].applyTime,
                    col7: listData[i].state
                }
                data.push(sj)
                // console.log(listData.midName)
            }
            // console.log(111)
            return data
        }

        <!--  导出excel  -->
        function correctExport() {
            layui.use(['layer'], function () {
                layui.layer.alert('正常弹出下载');
                // 直接调用iframe中的导出函数无法弹出下载
                parent.layui.excel.exportExcel(getExportData(), '我的审核状态.xlsx', 'xlsx')
                // 嵌套层级比较多，可以考虑用 top
                // top.LAY_EXCEL.exportExcel([[1, 2, 3]], 'test.xlsx', 'xlsx')
            })
        }

	</script>
	<script type="text/javascript" src="../../../tajs.qq.com/stats-sId=9051096"
			tppabs="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</div>
</body>

</html>